<template>
  <div id="article_manage">
    <el-tabs class="wi_tab" type="border-card" >
      <el-tab-pane label="我的文章">
        <el-button size="small" icon="el-icon-plus" type="primary" @click="createArticle">发布文章</el-button>
        <div class="article_item" v-for="article in articleList" :key="article.articleId">
          <div class="content">
            <div class="publish_title">
              <span @click="goArticle(article.articleId)" style="cursor: pointer">{{ article.articleTitle }}</span>
              <span class="publish_category">
                 <el-button plain type="primary" size="mini" style="position:absolute;right:73px;top:0;" icon="el-icon-edit"
                            @click="editArticle(article)">编辑</el-button>
               <el-button plain type="primary" size="mini" style="position:absolute;right:0;top:0;" icon="el-icon-delete"
               @click="deleteArticle(article.articleId)">删除</el-button>
              </span>
            </div>
            <div class="publish_content">{{article.articleContent}}
            </div>
            <div class="publish_detail" style="position: relative;">
               <span><i class="iconfont icon-show_renqiredu">{{23*article.commentNumber}}</i></span>
              <span style="padding-left:15px;"><i class="iconfont icon-comment">{{ article.commentNumber }}</i></span>
              <span style="position:absolute;left:45%;top:0">{{ article.articleType }}</span>
              <span style="float:right;display: inline-block;">发布于 {{article.createTime}}</span>
            </div>
          </div>
        </div>
        <el-empty v-show="articleList.length==0" description="暂无数据"></el-empty>
        <el-pagination
            background
            layout="total,prev, pager, next"
            :total="article_total"
            align="center"
            @current-change="articleHandleCurrentChange"
            :current-page="article_currentPage"
            :page-size="article_pageSize"
            :hide-on-single-page="article_value"
            style="padding-top: 15px"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="我的评论">
        <div class="article_item" v-for="comment in commentList" :key="comment.commentId">
          <div class="content">
            <div class="publish_title">
              <span @click="goArticle(comment.articleId)" style="cursor: pointer">{{ comment.articleTitle }}</span>
            </div>
            <div class="comment_content"> {{ comment.commentContent.split(":")[1] }}
            </div>
            <div class="publish_detail" style="position: relative">
              <span><i class="iconfont icon-comment">{{comment.childCommentList.length }}</i></span>
              <span style="float:right;display: inline-block;margin-right: 80px;">评论于 {{ comment.createTime }}</span>
              <el-button plain type="primary" size="mini" style="position:absolute;right:0;bottom:0;" icon="el-icon-delete" @click="deleteComment(comment.commentId)">删除</el-button>
            </div>
          </div>
        </div>
        <el-empty v-show="commentList.length==0" description="暂无数据"></el-empty>
        <el-pagination
            background
            layout="total,prev, pager, next"
            :total="comment_total"
            align="center"
            @current-change="commentHandleCurrentChange"
            :current-page="comment_currentPage"
            :page-size="comment_pageSize"
            :hide-on-single-page="comment_value"
            style="padding-top: 15px"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {delArticle, delComment, getMyArticleList, getMyCommentList} from "@/network/recruit";

export default {
  name: "ArticleManage",
  data(){
    return{
      article_value:true,
      article_currentPage:1,
      article_total:1000,
      article_pageSize:10,
      comment_value:true,
      comment_currentPage:1,
      comment_total:1000,
      comment_pageSize:10,
      userName:'',
      articleList:[],
      commentList:[],
    }
  },
  mounted() {
    if(localStorage.getItem("common_userName")){
      this.userName = localStorage.getItem("common_userName");
    }
    this.myArticleList();
    this.myCommentList();
  },
  methods:{
    articleHandleCurrentChange(currentPage){
      this.currentPage = currentPage;
    },
    commentHandleCurrentChange(currentPage){
      this.currentPage = currentPage;
    },
    myArticleList(){
      getMyArticleList(this.userName,this.article_currentPage,this.article_pageSize,).then(res=>{
        this.articleList = res.data.data.list;
        this.article_total = res.data.data.total;
      })
    },
    deleteArticle(articleId){
      delArticle(articleId).then(res=>{
       if(res!=undefined){
         this.$message.success("删除成功");
         this.myArticleList();
       }
      })
    },
    myCommentList(){
      getMyCommentList(this.userName,this.comment_currentPage,this.comment_pageSize,).then(res=>{
        this.commentList = res.data.data.list;
        this.comment_total = res.data.data.total;
      })
    },
    deleteComment(commentId){
      delComment(commentId).then(res=>{
        if(res!=undefined){
          this.$message.success("删除成功");
          this.myCommentList();
        }
      })
    },
    goArticle(articleId){
      this.$router.push({name:'article',params:{articleId:articleId}});
    },
    createArticle(){
      this.$router.push({name:'editArticle'});
    },
    editArticle(article){
      this.$router.push({name: 'editArticle', params: {key: article}});
    }
  }
}
</script>

<style scoped>
#article_manage{
  background-color:white;
  box-shadow: 0 5px 5px 0 #eceaea;
  min-height: 433px;
}
/deep/ .el-tabs__content {
  min-height: 434px;
  box-shadow: 0 5px 5px 0 #eceaea;
}
.hot_article {
  width: 97.5%;
  height: 420px;
  background-color: white;
  margin-left: 10px;
}

.el-divider--horizontal {
  height: 0.5px;
  margin: 5px 0 5px 0;
}

.filter {
  padding: 10px 20px 0 20px;
}

.choice {
  padding: 10px 20px 0 20px;
}

.publish_name {
  color: cornflowerblue;
}

.publish_user {
  display: inline-block;
  height: 30px;
}

.publish_name {
  top: 3px;
  padding-left: 5px;
}

.publish_category {
  font-size: 14px;
  top: 8px;
  color: #8a8a8a;
  float: right;
  font-weight:500;
}

.publish_title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 7px;
}

.publish_content {
  margin-top: 5px;
  color: #8a8a8a;
  font-size: 14px;
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 3;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}
.comment_content{
  margin-top: 10px;
  color: #8a8a8a;
  font-size: 14px;
}
.publish_detail {
  color: #8a8a8a;
  margin-top: 5px;
  font-size: 14px;
}

.article_item {
  margin-bottom: 20px;
  cursor: pointer;
  box-shadow: 2px 3px 0 2px rgb(0 0 0 / 10%);
  position: relative;
}


</style>